
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<title>Google Maps JavaScript API v3 Example: Event Closure</title>
	<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript" src="include/js/mootools-core-1.3.2-full-compat.js"> </script>
	<script type="text/javascript" src="include/js/mootools-more-1.3.2.1.js"> </script>
	<script type="text/javascript">

			var map;
			var markers = [];
			var latLngs = [];
                        var marcado = false;
                        var marker;

			function initialize() {
			  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
			  var myOptions = {
				zoom: 4,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			  }
			  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

			  google.maps.event.addListener(map, 'click', function(event) {
                              if(!marcado){                                  
				placeMarker(event.latLng);
                                var input = marker.position;
                                var latlngStr =  marker.position.split(",",2);
                                var lat = parseFloat(latlngStr[0]);
                                var lng = parseFloat(latlngStr[1]);

                                alert(marker.position+"  "+lat+"   "+lng);
                              }
			  });
			}

			function placeMarker(location) {
			  
			  marker = new google.maps.Marker({
				  position: location,
				  map: map,
				  title: 'Pedro'
                                  
			  });
                          
                          marcado = true;
			  //markers.push(marker.position);

			  //map.setCenter(location);
			}

			function teste(){
				return markers;
			}

			function deleteOverlays() {
				  if (markers) {
                                        for (i in markers) {
                                                markers[i].setMap(null);
                                        }
                                        markers.length = 0;
				  }
			}
                        
                        function printingMarkers(arrMarkers) {
                            for (i =0 ; i< arrMarkers.length;i++) {
                                   placeMarker(arrMarkers[i]);
                            }
                            
                        }
			
		window.addEvent('domready', function(){

			
			var save = new Request({
				url: 'include/request/save.php'
			});

			$$('.save').addEvent('click',function(){
					var m = teste();
					save.post({markers:m});
			});

			var read = new Request.JSON({
				url: 'include/request/read.php',
				onSuccess: function(responseJSON ){
					var coordenadas = responseJSON;
					var lat,lng,latLng;
                                        var l =[];
					for (i =0 ; i< coordenadas.length;i++) {
                                                lat = coordenadas[i].lat;
                                                lng = coordenadas[i].lng;
                                                alert(lat+"   "+lng);
                                                latLng = new google.maps.LatLng(lat,lng);
                                                l.include(latLng);
                                        }
                                                printingMarkers(l);
					
				}
			});

			$$('.read').addEvent('click',function(){
					read.send();
			});

			$$('.deleteAll').addEvent('click',function(){
					deleteOverlays();
			});



		});
	</script>
</head>
	<body onload="initialize()">
		<div style="width: 600px; height: 400px;" id="map_canvas"></div>
		<br />
                <form method="post" action="">
                    <textarea name="conteudo"></textarea><br/>
                    <input type="text" name="latitude" /><br/>
                    <input type="text" name="longitude" /><br/>
                </form>
	</body>
</html>
